{% extends "base.html" %}
{% load thumbnail %}
{% load append_to_get %}
{% block title %}游戏列表 - Wine游戏助手{% endblock %}
{% block extra_head %}
{{ filter_form.media.css }}
{% endblock %}
{% block content %}

<!-- HEADER -->
<div class="header-wrap">
  <h1>游戏列表 <small>共 {{ paginator.count }} 个
    {% if unpublished_match_count > 0 %}<b>(<a href="{% append_to_get unpublished-filter='on' %}">{{unpublished_match_count}} 个尚未发布</a>)</b> {% endif %}</small>
    <span style="float: right;font-size: initial;margin-right: 1em;">
        排序
        <select id="order_by" style="color:black;"
                data-filter="{{ filter_string }}"
                onchange="changeLibraryOrderBy();">
          <option value="name" {% if order_by == 'name' %} selected {% endif %}>名称 &uarr;</option>
          <option value="-name" {% if order_by == '-name' %} selected {% endif %}>名称 &darr;</option>
          <option value="year" {% if order_by == 'year' %} selected {% endif %}>年份 &uarr;</option>
          <option value="-year" {% if order_by == '-year' %} selected {% endif %}>年份 &darr;</option>
          <option value="popularity" {% if order_by == 'popularity' %} selected {% endif %}>热度 &uarr;</option>
          <option value="-popularity" {% if order_by == '-popularity' %} selected {% endif %}>热度 &darr;</option>
          <option value="created" {% if order_by == 'created' %} selected {% endif %}>创建日期 &uarr;</option>
          <option value="-created" {% if order_by == '-created' %} selected {% endif %}>创建日期 &darr;</option>
          <option value="updated" {% if order_by == 'updated' %} selected {% endif %}>更新日期 &uarr;</option>
          <option value="-updated" {% if order_by == '-updated' %} selected {% endif %}>更新日期 &darr;</option>
        </select>
    </span>
  </h1>
  {% if is_paginated %}
  <div class="row">
    <div class="col-md-12">
      <span style="line-height: 33px;">第 {{ page_obj.start_index }} - {{ page_obj.end_index }} 个游戏，共 {{ paginator.count }} 个</span>
      <span style="float: right;">
          每页
          <select id="paginate_by" style="color:black;"
                  data-filter="{{ filter_string }}"
                  onchange="changeLibraryPaginateCount();">
            <option value="25" {% if paginate_by == '25' %} selected {% endif %}>25</option>
            <option value="50" {% if paginate_by == '50' %} selected {% endif %}>50</option>
            <option value="100" {% if paginate_by == '100' %} selected {% endif %}>100</option>
          </select>
          条
      </span>
    </div>
  </div>
  {% include 'includes/library_paginator.html' %}
{% endif %}
</div>

<div class="row">
  <div class="col-sm-9">
    {% if games %}
    <ul class="game-list">
      {% for game in games %}
        {% include "includes/game_preview.html" %}
      {% endfor %}
    </ul>
    {% else %}
      <div class="filter-failure-message">
        <p class="filter-failure-icon">
          <span class="glyphicon glyphicon-alert"></span>
        </p>
        <p>找不到符合筛选条件的游戏</p>
        {% if not unpublished and unpublished_match_count > 0 %}
          <p>
            不过，有 <a href="{% append_to_get unpublished-filter='on' %}">{{ unpublished_match_count }} 个未发布游戏</a>符合筛选条件，
            你可以勾选“显示尚未发布的游戏”来显示它们。
          </p>
        {% else %}
          <p>
            尝试勾选<a href="{% append_to_get unpublished-filter='on' %}">显示尚未发布的游戏</a>看看能不能搜到。
            如果还是找不到，可以考虑向我们的数据库<a href="{% url 'game-submit' %}">提交游戏</a>。
          </p>
        {% endif %}
      </div>
    {% endif %}
  </div>
  <div class="col-sm-3">
    <div class="action-container">
      <a href="{% url 'game-submit' %}" class="action-button margin-auto hidden-xs">提交新游戏</a>
    </div>
    <div class="panel panel-default no-border">
      <div class="panel-body" style="background-color:#444;">
        <form action="{% url 'game_list' %}" method="get" id="library_filter_form">
          {{ filter_form.as_p }}
          <label for="unpublished-filter" style="margin-bottom: 1em;margin-top: 0;">
            <input type="checkbox" id="unpublished-filter" name="unpublished-filter"
                {% if unpublished_filter %}checked{% endif %} />
            显示尚未发布的游戏
          </label>
          <label for="search-installers" style="margin-bottom: 1em;margin-top: 0;">
            <input type="checkbox" id="search-installers" name="search-installers"
                {% if search_installers %}checked{% endif %} />
            在安装脚本中搜索
          </label><br>
          <input type="button" value="筛选" class="btn btn-default no-border"
                 onclick="applyLibraryFilter();">
          <input type="button" value="清除" class="btn btn-default no-border"
                 style="margin-left: 10px;"
                 onclick="clearLibraryFilter();">
        </form>
      </div>
    </div>
  </div>
</div>

{% if page_obj.has_other_pages %}
  {% include 'includes/library_paginator.html' %}
{% endif %}
{% endblock %}

{% block scripts %}
  {{ block.super }}
  {{ filter_form.media.js }}
{% endblock %}
